<template>
	<view class="invite">
		<view class="banner">
			<image :src="bannerUrl" style="width: 100%;" mode="widthFix"></image>
		</view>
		<button class="kefuClass" open-type="share"> <image style="width: 20px;height: 20px;" src="@/static/weixin.png"></image> 立即邀请</button>
		<!-- <view @click="shareMiniProgram">分享赚钱</view> -->
		<view class="btns">
			<view @click="savePhoto(bannerUrl)">保存海报</view>
			<view @click="showQrCode">面对面邀请</view>
			<view @click="toLog">邀请记录</view>
		</view>
		<view class="shareCode">
			<view class="title">您的好友</view>
			<view class="title">尾号{{phone}}邀请您使用洗丫丫</view>
			<view style="text-align: center;">
				<image :src="invitedUrl" style="width: 100px;margin: 20px 0 5px;" mode="widthFix"></image>
				<view style="color: #b5b5b5;margin: 15px 0;">微信扫一扫领大额满减洗衣券</view>
				<view style="font-weight: bold;" @click="savePhoto(invitedUrl)">保存二维码</view>
			</view>
		</view>
		<view class="rules">
			<view class="desc">邀请活动规则：</view>
			<view class="desc">1. 推荐人在活动页中点击分享按钮，将链接分享给好友;</view>
			<view class="desc">2. 您的好友（被邀请人）点击链接进入洗丫丫小程序，或通过二维码方式进入小程序，授权微信绑定手机号;</view>
			<view class="desc">3. 当被邀请人在洗丫丫平台满足以下条件的时候，你即和被邀请人建立了一对一的绑定关系。</view>
			<view class="desc">即：被邀请人从未注册过洗丫丫平台；</view>
			<view class="desc">4. 被邀请人被邀请后，在洗丫丫平台完成任意清洗订单（需要订单已正常完成，无售后），你将获得被邀请人清洗订单实付金额的部分作为邀请奖励；</view>
			<view class="desc">5. 邀请奖励请关注洗丫丫平台的微信公众号进行查询和核实。</view>
			<view style="text-align: center;">
				<image src="@/static/gongzonghao.jpg" style="width: 100px;height: 100px;margin: 20px 0;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getQrCode, getUserInfo } from '@/api/home.js'
	import baseUrl from '@/utils/baseUrl.js'
	export default { 
		data() {
			return {
				invitedUrl: '',
				show: false,
				phone:'',
				bannerUrl:''
			}
		},
		onShareAppMessage(res) {
			return {
				title: '分享赚钱',
				path: 'pages/index/index?consumerId=31',
				imageUrl: this.bannerUrl
			}
		},
		onLoad() {
			getUserInfo().then(res=>{
				this.phone = res.data.phone.substr(-4);
			})
			getQrCode().then(res=>{
				this.invitedUrl = baseUrl + res.data.path
				this.bannerUrl = JSON.parse((res.data.bg))[0]
			})
		},
		methods:{
			toLog(){
				uni.navigateTo({
					url:'/pages/invitedHistory/index'
				})
			},
			showQrCode() {
				this.show = !this.show
			},
			savePhoto(tempFilePath) {
				uni.saveImageToPhotosAlbum({
				  filePath: tempFilePath,
				  success: function () {
				    uni.showToast({
				      title: '图片保存成功'
				    });
				  },
				  fail: function (err) {
				    console.log('保存失败：', err);
				    if (err.errMsg.includes('saveImageToPhotosAlbum:fail auth deny')) {
				      uni.showModal({
				        title: '提示',
				        content: '需要授权保存图片到相册',
				        success: function (res) {
				          if (res.confirm) {
				            uni.openSetting();
				          }
				        }
				      });
				    }
				  }
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.rules{
		background-color: #fff;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		margin-top: 10px;
	}
	.shareCode{
		background-color: #fff;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 4px;
		text-align: center;
		.title{
			font-size: 16px;
			font-weight: bold;
		}
	}
	.btns{
		display: flex;
		justify-content: space-around;
		font-size: 16px;
		margin-bottom: 30px;
	}
	.desc{
		margin-top: 8px;
		font-size: 13px;
	}
	.kefuClass::after {
		border: none;
		height: 0!important;
	}
	.kefuClass {
		position: relative;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #fff;
		padding: 10px;
		box-sizing: border-box;
		margin: 15px 0;
		text-align: center;
		font-size: 15px;
		background-color: #2c6cf4;
		width: 100%;
		height: 100%;
	}
	.invite{
		padding: 10px;
		box-sizing: border-box;
	}
	.banner{
		width: 100%;
		background-color: #fff;
		border-radius: 4px;
	}
</style>